<template>
 <div class="login-container">
    <div class="nav-wrap">
        <img class="logo" src="@/assets/account/login-logo.svg" alt="">
        <el-divider direction="vertical" />
        <span style="color: #ccc;">v4.14.4.19</span>
    </div>
    <div class="login-wrap">
        <img class="login-bg" src="@/assets/account/login_bg.png" alt="">
        <div class="login-form">
            <div class="title">登录</div>
            <el-form label-position="top" :model="loginForm" :rules="rules" ref="ruleFormRef">
                <el-form-item prop="username">
                    <el-input size="large" v-model="loginForm.username" :prefix-icon="User" placeholder="账号" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="large" v-model="loginForm.password" :prefix-icon="Lock" type="password" show-password placeholder="密码" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loading" style="width: 330px;margin-top: 46px;" @click="onLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="footer">版权所有© 2024 安徽省阜阳市阜南县</div>
    </div>
 </div>
</template>

<script setup lang='ts' name='Login'>
import { User, Lock } from '@element-plus/icons-vue'
import { reactive,ref } from 'vue';
//@ts-ignore
import { getTime } from '@/utils/time'
//引入用户相关的仓库
//@ts-ignore
import useUserStore from '@/store/modules/user'
let useStore = useUserStore()
import { useRouter,useRoute  } from 'vue-router'
let $router = useRouter()
let $route = useRoute()
import { ElNotification } from 'element-plus'

let loginForm = reactive({
    username: 'admin',
    password: '111111'
})
let loading = ref(false)
let ruleFormRef = ref()

//表单校验
//自定义校验规则
const validateUserName = (rule: any, value: any, callback: any)=>{
   if(value.length >= 5){
      callback()
   }else{
      callback(new Error('账号长度至少5位'))
   }
}

const validatePassword = (rule: any, value: any, callback: any)=>{
   if(value.length >= 6){
      callback()
   }else{
      callback(new Error('密码长度至少6位'))
   }
}

const rules = reactive({
   username: [
    { validator: validateUserName, trigger: 'change' }
    //   { required: true, message: '请输入账号', trigger: 'blur' },
    //   { min: 5, max: 10, message: '账号长度至少5位', trigger: 'blur' },
   ],
   password: [
    { validator: validatePassword, trigger: 'change' }
    //   { required: true, message: '请输入密码', trigger: 'blur' },
    //   { min: 6, max: 15, message: '密码长度至少6位', trigger: 'blur' },
   ],
})
//点击登录按钮
const onLogin = async ()=>{
   await ruleFormRef.value.validate();
   loading.value = true
   try {
      await useStore.userLogin(loginForm)
      
      //判断登录的时候，判断路由是否有query参数
      let redirect:any = $route.query.redirect
      $router.push({path:redirect || '/'})

      ElNotification({
         type: 'success',
         title:`HI,${getTime()}好`,
         message: '欢迎回来',
      })
      loading.value = false
   } catch (error) {
      loading.value = false
      ElNotification({
         type: 'error',
         message: (error as Error).message,
      })
   }
}

</script>

<style scoped lang='scss'>
.login-container{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    .nav-wrap{
        display: flex;
        align-items: center;
        width: 100%;
        height: 84px;
        padding-left: 80px;
        .logo{
            width: 117px;
        }
    }
    .login-wrap{
        flex: 1;
        width: 100%;
        height: 0; // 防止撑开高度，由flex控制
        position: relative;
        .login-bg{
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .login-form{
            position: absolute;
            right: 10%;
            top: 50%;
            transform: translateY(-50%);
            padding: 30px 20px;
            background: #fff;
            border-radius: 4px;
            box-sizing: border-box;
            .title{
                font-size: 20px;
                font-weight: 500;
                margin-bottom: 20px;
            }
        }
        .footer{
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #ccc;

        }
    }
}
</style>